<template>
  <!-- 右侧抽屉 -->
  <div :class="['container', { dark: isDarkTheme }]">
    <el-drawer
      class="drawer"
      v-model="isDrawerOpen"
      direction="rtl"
      size="400px"
      :with-header="false"
      :modal="true"
      :style="{ '--theme-color': settings.themeColor }"
      :destroy-on-close="true"
    >
      <div class="setting-item">
        <span class="drawer-title">配置</span>
        <div class="drawer-header-actions">
          <!-- 关闭抽屉 -->
          <el-button :icon="Close" circle @click="toggleDrawer" />
        </div>
      </div>

      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 专注时长配置 -->
      <div class="setting-item">
        <span class="setting-label">专注时长（分钟）</span>
        <el-input-number v-model="settings.focusDuration" :min="1" :step="1" />
      </div>

      <!-- 休息时长配置 -->
      <div class="setting-item">
        <span class="setting-label">休息时长（分钟）</span>
        <el-input-number v-model="settings.restDuration" :min="1" :step="1" />
      </div>

      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 结束提醒声音 -->
      <div class="setting-item">
        <span class="setting-label">结束提醒声音</span>
        <el-switch
          v-model="settings.reminderSound"
          size="default"
          :style="{ '--el-switch-on-color': settings.themeColor }"
        />
      </div>

      <!-- 结束提醒通知 -->
      <div class="setting-item">
        <span class="setting-label">结束提醒通知</span>
        <el-switch
          v-model="settings.reminderNotification"
          size="default"
          :style="{ '--el-switch-on-color': settings.themeColor }"
        />
      </div>

      <!-- 专注结束自动开始休息 -->
      <div class="setting-item">
        <span class="setting-label">专注结束自动开始休息</span>
        <el-switch
          v-model="settings.autoStartRest"
          size="default"
          :style="{ '--el-switch-on-color': settings.themeColor }"
        />
      </div>

      <!-- 休息结束自动开始专注 -->
      <div class="setting-item">
        <span class="setting-label">休息结束自动开始专注</span>
        <el-switch
          v-model="settings.autoStartFocus"
          size="default"
          :style="{ '--el-switch-on-color': settings.themeColor }"
        />
      </div>

      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 主题选择 -->
      <div class="setting-item">
        <span class="setting-label">主题选择</span>
        <el-dropdown size="small" split-button>
          {{ currentThemeLabel }}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in themeList" @click="changeTheme(item.name)">{{
                item.label
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 主题色 -->
      <div class="setting-item">
        <span class="setting-label">主题颜色</span>
        <div style="display: flex">
          <el-icon
            class="theme-color"
            v-for="color in themeColorList"
            :style="{ backgroundColor: color }"
            @click="changeThemeColor(color)"
          >
            <Select v-if="settings.themeColor === color" />
          </el-icon>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 白噪音选择 -->
      <div class="setting-item">
        <span class="setting-label">白噪音选择</span>
        <el-dropdown size="small" split-button>
          {{ settings.whiteNoise }}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in whiteNoiseList" @click="changeWhiteNoise(item.name)">{{
                item.name
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 白噪音选择 -->
      <div class="setting-item">
        <span class="setting-label">白噪音音量</span>
        <el-slider
          class="volume-slider"
          v-model="settings.volume"
          @input="adjustWhiteNoiseVolume"
          style="width: 180px"
        />
      </div>

      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 是否开启翻页时钟 -->
      <div class="setting-item">
        <span class="setting-label">是否开启翻页时钟</span>
        <el-switch
          v-model="settings.showClock"
          size="default"
          @change="toggleShowClock"
          :style="{ '--el-switch-on-color': settings.themeColor }"
        />
      </div>

      <!-- 时钟配色 -->
      <div class="setting-item">
        <span class="setting-label">时钟主题</span>
        <el-dropdown size="small" split-button>
          {{ settings.clockTheme }}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in clockThemeList" @click="changeClockTheme(item.name)">{{
                item.name
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 时钟尺寸调整 -->
      <div class="setting-item">
        <span class="setting-label">时钟尺寸调整</span>
        <el-slider
          class="volume-slider"
          :max="3"
          :min="1"
          :step="0.1"
          v-model="settings.clockSizeScale"
          style="width: 180px"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { computed, onMounted } from "vue";
import { Close } from "@element-plus/icons-vue";
import { whiteNoiseList } from "../js/constant.js";
// 导入常量
import { clockThemeList, themeColorList, themeList } from "../js/constant.js";
// 导入配置管理模块
import {
  settings,
  changeThemeColor,
  isDrawerOpen,
  toggleDrawer,
  isDarkTheme,
  changeWhiteNoise,
  adjustWhiteNoiseVolume,
  changeClockTheme,
  toggleShowClock,
  changeTheme,
  currentThemeLabel,
} from "../js/setting.js";
</script>
<style scoped lang="scss">
.container {
  ::v-deep .drawer {
    background-color: #f4f4f4;
    .el-drawer__body {
      // 滚动条滑块颜色
      &::-webkit-scrollbar-thumb {
        background: var(--theme-color);
      }
    }

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 24px;

      .drawer-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }

      .drawer-header-actions {
        display: flex;
        gap: 8px;
      }

      .setting-label {
        font-size: 14px;
        color: #333;
      }
    }

    .divider {
      height: 1px;
      background-color: #dadada;
      margin: 12px 0;
      padding: 0 24px;
    }

    // 主题色
    .theme-color {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      margin: 0 4px;
      color: #fff;
      transition: all 0.2s ease-in-out;

      &:hover {
        //放大
        transform: scale(1.1);
      }
    }

    // 音量滑块
    .volume-slider {
      .el-slider__bar {
        background-color: var(--theme-color);
      }
      .el-slider__button {
        border: 2px solid var(--theme-color);
      }
    }
  }
}

// 暗黑模式样式
.container.dark {
  ::v-deep .drawer {
    background-color: #303133;

    .setting-item {
      .drawer-title {
        color: #eee;
      }
      .setting-label {
        color: #eee;
      }
    }
  }
}
</style>
